<template>
    <div class="userIntrContainer">
        <!-- 顶部菜单 -->
        <div class="top">
            <div class="left" @touchend="$router.back()">
                    <yd-icon name="back" slot="icon" custom  size=".3rem" color="#FFffff"></yd-icon>
                    返回
            </div>
            <div class="mid">
                详细资料
            </div>
            <div class="right" @touchend="set" v-if="$store.state.stateWrite!=null">
                ...
            </div>
        </div>
        <!-- 详情 -->
        <div class="main">
            <div class="user">
                <div class="left">
                    <img :src="user.photo">
                </div>
                <div class="mid">
                    <p>
                        {{user.name}}
                    <yd-icon v-if="user.gender" name="man" slot="icon" custom  size=".3rem" color="#27a5c5"></yd-icon>                        
                    <yd-icon v-if="!user.gender" name="woman" slot="icon" custom  size=".3rem" color="#ed3c0d"></yd-icon>                        
                    </p>
                    <p style="margin-top:.1rem;color:#aaaaaa">账号：{{user.mobilephone}}</p>
                </div>
                <div class="right" @touchend="focus" v-if="$store.state.userDetail.status1||$store.state.userDetail.status2">
                    <img src="./img/focus.png">
                    <p v-if="$store.state.userDetail.status2==0">关注</p><p v-if="$store.state.userDetail.status2==1">已关注</p>
                </div>
            </div>
            <!-- 备注 -->
            <!-- <div class="remak" @touchend="inputItem.show=true">
                设置备注
                <yd-icon name="next" slot="icon" custom  size=".3rem" color="#bbbbbb"></yd-icon>                
            </div> -->
            <!-- 其他详情 -->
            <div class="otherList">
                <div class="item">
                    个性签名
                    <span style="margin-left:.3rem">{{user.signature}}</span>
                </div>
                <div class="active">个人动态
                <yd-icon name="next" slot="icon" custom  size=".3rem" color="#bbbbbb"></yd-icon>                                    
                </div>
            </div>
                <!-- 按钮 -->
            <div class="btns">
                <button @touchend="add" v-show="btnshow">添加到通讯录</button>
                <button @touchend="agree" v-show="agreeShow" class="agree">通过验证</button>
                <button @touchend="sendMsg" v-show="msgShow" class="msg">发送消息</button>
            </div>
        </div>
        <!-- 发送好友请求 -->
        <div class="send" v-show="model">
             <!-- 顶部菜单 -->
            <div class="sendtop">
                <div class="left" @touchend="model=false">
                        取消
                </div>
                <div class="mid">
                    发送验证
                </div>
                <div class="right" @touchend="sendApply">
                    发送
                </div>
            </div>
            <!-- 请求消息 -->
            <div class="msg">
                <p>你需要发送验证申请，等待对方通过</p>
                <input type="text" v-model="message">
                <img class="clear" src="./img/close.png" v-show="messageShow" @touchend="message=''">
            </div>
        </div>
        <!-- 弹出输入框 -->
      <yl-pop-input :ylPop="inputItem" v-if="inputItem.show" @resVal="getMsg"></yl-pop-input>
    </div>
</template>
<script>
import ylPopInput from '@/components/popInput'
export default {
  data(){
      return{
          user:{
              mobilephone:'131131313',
              name:'yanli_13113*****',
              signature:'今天天气不错',
              gender:'0',
              photo:'http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg'
          },
          model:false,//发送请求界面
          genderShow:null,//性别显示
          message:'',//验证消息
          messageShow:false,
          btnshow:true,//通讯录按钮  
          agreeShow:false,//验证按钮
          msgShow:false,//发送消息按钮
          srcuser:null,//申请人信息
          remarkname:'',//备注姓名
          inputItem:{//弹出输入框
              cancel:this.cancel,
              show:false,
              title:"设置备注",
              holder:"在下面填入您要填写的备注"
          },
      }
  },
  components:{
      ylPopInput
  },
  watch:{
      message(newVal,oldVal){
          if(newVal.length!=0){
              this.messageShow=true
          }else{
              this.messageShow=false
          }
      }
  },
  methods:{
      sendApply(){//发送好友请求
        let data={
            srcuserid:localStorage.userid,
            srcusername:localStorage.username,
            srcmsg:this.message,
            srcphoto:localStorage.myphoto,
            destuserphone:this.$store.state.searchPhone
        }
        if(this.$store.state.addorfo.type=="friend"){
                    this.ylAjax.apply(data)
                    .then(res=>{
                        console.log(res)
                        if(res.state==0){
                        this.$dialog.toast({
                            mes: '请求已发送，请等待对方同意',
                            timeout: 1500,
                            icon: 'success'
                        });
                        setTimeout(() => {
                                this.$router.push({path:"/chat"})
                            }, 1500);
                        }
                    })

        }else if(this.$store.state.addorfo.type=="focus"){
            this.ylAjax.focusApply(data)
                       .then(res=>{
                           console.log(res)
                        if(res.state==0){
                            this.$dialog.toast({
                                mes: '关注请求已发送，请等待对方同意',
                                timeout: 1500,
                                icon: 'success'
                            });
                            setTimeout(() => {
                                    this.$router.back()
                                }, 1500);                            
                        }
                       })
                       .catch(error=>{
                           throw error
                       })
        }
      },
      set(){//用户资料设置
        //先查询用户权限
        let mydata={
            myUserID:localStorage.userid,
            otherUserID:this.$store.state.userDetail.id
        }
        this.ylAjax.showJurisdiction(mydata)
                   .then(res=>{
                      if(res.state==0){
                          this.$store.commit("userState",res.data)
                            this.$router.push({name:"userSet"})
                      }else{
                          this.$store.commit("userState",[])
                          this.$router.push({name:"userSet"})
                      }
                   })
                   .catch(error=>{
                       throw error
                       this.$router.push({name:"userSet"})
                   })
                //    this.$router.push({name:"userSet"})
      },
      add(){//添加好友
        this.model=true
        let a={
            type:"friend"
        }
        this.$store.commit("addorfo",a)
      },
      cancel(){//取消弹出框
          this.inputItem.show=false
      },
      focus(){//添加关注
        if(this.$store.state.userDetail.status2=="0"){
        let a={
            type:"focus"
        }
        this.$store.commit("addorfo",a)
            this.model=true
        }
      },
      getMsg(data){//获取弹出框消息
           this.inputItem.show=false
          console.log(data)
          this.remarkname=data
      },
      agree(){//同意申请
          if(this.$route.query.status=="handel"){
                let data={
                    applyId:this.srcuser.id,
                    handlestatus:'接受',
                    remark:this.remarkname,
                    //   groupname:'我的好友',
                    username:localStorage.username
                }
            this.ylAjax.handelApply(data)
                .then(res=>{
                    console.log(res)
                    if(res.state==0){
                        this.$dialog.toast({
                            mes: '您已成功添加该好友,即将返回好友列表',
                            timeout: 1500
                        });
                        setTimeout(() => {
                            this.$router.push({path:'/friend'})
                        }, 500);   
                        }else if(res.state==2){//已经被对方添加好友
                            this.$dialog.toast({
                                mes: '你们已经是好友了，请返回好友列表查看',
                                timeout: 1500
                        });
                        setTimeout(()=> {
                            this.$router.push({path:'/friend'})
                            }, 500);    
                        }
                    })
          }else if(this.$route.query.status=="handelFocus"){
            let data={
                applyId:this.srcuser.id,
                handlestatus:'接受',
                // remark:this.remarkname,
                //   groupname:'我的好友',
                // username:localStorage.username
            }
            this.ylAjax.handleFocusApply(data)
                .then(res=>{
                    console.log(res)
                    if(res.state==0){
                        this.$dialog.toast({
                            mes: '你已经成功引起对方关注，即将返回',
                            timeout: 1500
                        });
                        setTimeout(() => {
                            this.$router.push({path:'/focus'})
                        }, 500);   
                        }else if(res.state==2){//已经被对方添加好友
                        setTimeout(()=> {
                            this.$router.push({path:'/focus'})
                            }, 500);    
                        }
                    })                      
          }

      },
      sendMsg(){//发送消息
        console.log(this.$store.state.userDetail)
        this.$router.push({name:'latestMsg'})
      }
  },
  created(){
        this.user=this.$store.state.userDetail
        this.srcuser=this.$route.query.srcuser
        //    console.log(this.$store.state.userDetail.status)
  },
  mounted(){
    //   获取vuex数据
 
    if(this.user.gender==1){
        this.genderShow=true
    }else{
        this.genderShow=false
    }
    // 判断进入页面状态，对应显示相应按钮
     if(this.$route.query.status=="handel"||this.$route.query.status=="handelFocus"){
         this.btnshow=false
         this.agreeShow=true
         this.msgShow=false
     }
     if(this.$route.query.status=="msg"||this.$store.state.userDetail.status1==1){
         this.btnshow=false
         this.agreeShow=false
         this.msgShow=true
     }
    if(this.$route.query.status=="add"&&this.$store.state.userDetail.status1==0){
         this.btnshow=true
         this.agreeShow=false
         this.msgShow=false
     }
  },
}
</script>
<style lang="less" scoped>
    @import "~less/base";
    .userIntrContainer{
        img{
            max-width: 100%;
            max-height: 100%
        }
        .top{//顶部导航
            height: 1rem;
            line-height: 1rem;
            color: @color-t;
            background-color: @background-a;
            display: flex;
            font-size: 16px;
            .left{
                flex: 0 0 20%;
                text-align: center;
            }     
            .mid{
                flex: 0 0 60%;
                text-align: center
            }
            .right{
                flex: 0 0 20%;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                line-height: .8rem;
            }
        }
        .main{//详细信息
            position: absolute;
            top: 1rem;
            bottom: 0;
            width: 100%;
            overflow-y: scroll;
            .user{//用户头像与用户名
                 display: flex;
                 margin-top: .5rem;
                 background-color: @background-bg;
                 padding: .2rem 0;
                 .left{
                     flex: 0 0 25%;
                     text-align: center;
                     img{
                         border-radius: 50%;
                         width:1.5rem;
                     }
                 }
                 .mid{
                     flex: 0 0 50%;
                 }
                 .right{
                     flex: 0 0 25%;
                     text-align: center;
                     font-size: 14px;
                     img{
                         width: .8rem;
                     }
                 }
            }
            .remak{//设置备注
                margin-top: .5rem;
                font-size: 14px;
                line-height: 1rem;
                background-color: @background-bg; 
                padding: 0 .3rem;
                i{
                    float: right;
                }              
            }
            .otherList{//其他信息
                background-color: @background-bg;
                margin-top: .5rem;
                padding: 0 .3rem; 
                .item{
                    border-bottom: 1px solid @color-border4;
                    line-height: 1rem;
                }
                .active{
                    height: 1.5rem;
                    line-height: 1.5rem;
                     i{
                            float: right;
                        } 
                }
            }
            .btns{//按钮
                margin-top: .5rem;
                text-align: center;
                button{
                    width: 90%;
                    border: 0;
                    background: @color-btn1;
                    color: @color-btnFont;
                    line-height: 1rem;
                    border-radius: 5px;
                    font-size: 16px;
                }
                button:active{
                    background:@color-btnBack
                }
                // .agree{
                //     background-color: #1de30e
                // }
                // .agree:active{
                //     background-color: #0dedb6
                // }
            }
        }
        .send{//发送请求
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color:  #f5f5f5;
            .sendtop{//上方菜单
                 display: flex;
                 background-color: @background-a;
                 line-height: 1rem;
                 color: @color-t;  
                 text-align: center;
                 font-size: 16px;
                .left,.right{
                    flex: 0 0 20%;
                }
                .mid{
                    flex: 0 0 60%;
                }
            }
            .msg{ 
                p{
                    margin-left: .3rem;
                    line-height: 1rem;
                    color:#aaaaaa;
                }
                input{
                    border: 0;
                    width: 100%;
                    background-color: @color-inputBack1;
                    line-height: 1rem;
                    font-size: 16px;
                    padding-left: .3rem;
                    padding-right: 1rem;
                }
                .clear{
                    position: absolute;
                    right: .3rem;
                    top:2.25rem;
                    width: .5rem;
                }
            }
        }
    }
</style>
